<template>
  <div v-transfer-dom>
    <popup v-model="showPopup"
      :width="width"
      :height="height"
      :position="position"
      @on-hide="toggle(false)"
      @on-show="toggle(true)"
      class="search-popup">
      <search-header :searchPlaceHolder="searchPlaceholder" v-model.trim="seachValue" @submitSearch="submitSearch" @removeSearch="searchList = []">
        <p slot="button" @click="toggle(false)">取消</p>
      </search-header>

      <scroll :data="searchList" style="overflow: hidden;" :style="{height: SearchScrolllHeight + 'px'}" :bounce="false">
        <div>
          <div class="searchBlock" v-if="searchHistory.length > 0">
            <h4 class="title">历史记录 <span @click="clearHistory"><i class="fa fa-trash-o" aria-hidden="true"></i>清空</span></h4>
            <div class="history-wrapper">
              <span v-for="(item, index) in searchHistory" :key="index" @click="submitSearch(item)">{{item.length > 9 ? item.substring(0, 9) + '...' : item}}</span>
            </div>
          </div>
          <div class="searchBlock" v-if="touristTrack.length > 0">
            <h4 class="title">智能路线推荐 </h4>
            <ul class="search-result">
              <li v-for="item in touristTrack" :key="item.id" class="item">
                <p class="right" style=" font-size: 15px;">{{item.name}}</p>
                <div @click="toTouristTrack(item.id)" :style="{backgroundImage: 'url(' + luxianIcon + ')'}" class="type"></div>
              </li>
            </ul>
          </div>
          <div class="searchBlock" v-if="searchList.length > 0">
            <h4 class="title">搜索结果</h4>
            <ul class="search-result">
              <!-- <div @click="clickResultItem(item.id, item.type, item)">
                <cell :title="item.name" :inline-desc="item.intro" class="searchResultDesc"></cell>
              </div> -->
              <li v-for="item in searchList" :key="item.id" @click="clickResultItem(item.id, item.type, item)" class="item">
                <div :style="{backgroundImage: 'url(' + item.icon + ')'}" class="type"></div>
                <div v-if="item.intro" class="right">
                  <p class="name">{{item.name}}</p>
                  <p class="desc">{{item.intro}}</p>
                </div>
                <p v-else class="right">{{item.name}}</p>
              </li>
            </ul>
          </div>
          <not-data v-if="isFirst " tip="请输入关键字搜索"></not-data>
          <not-data v-else-if="searchList.length == 0" tip="喔噢，没找到你搜索的数据~"></not-data>
        </div>
      </scroll>
    </popup>
  </div>
</template>

<script>
import { TransferDom, Popup } from 'vux'
import SearchHeader from '@/components/seach-header/seach-header'
import Scroll from '@/components/scroll/scroll'
import notData from '@/components/not-data/not-data'

import { isIphoneX } from '@/assets/js/brower'
import axios from '@/api/axiosApi'
import { localSearch } from '@/assets/js/local'

import scenicIcon from '@/assets/img/icon/jingdian.png'
import hotelIcon from '@/assets/img/icon/jiudian.png'
import foodIcon from '@/assets/img/icon/meishi.png'
import featureIcon from '@/assets/img/icon/techan.png'
import strategyIcon from '@/assets/img/icon/gonglue.png'
import travelsIcon from '@/assets/img/icon/youji.png'
import dynamicIcon from '@/assets/img/icon/dongtai.png'
import luxianIcon from '@/assets/img/icon/luxian.png'

const defaultTrack = [
  {
    id: '0',
    name: '西江千户苗寨'
  },
  {
    id: '1',
    name: '肇兴侗寨'
  }
]

export default {
  model: {
    prop: 'value',
    event: 'toggle'
  },
  props: {
    value: Boolean,
    searchPlaceholder: {
      type: String,
      default: '请输入关键字搜索...'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    position: {
      type: String,
      default: 'right'
    },
    /**
     * 搜索所在的页面
     * ['all', 'cart', 'address', 'strategy']
     * 全部、商城、目的地、游记攻略。（默认全部）
     */
    type: {
      type: String,
      default: 'all'
    },
    /**
     * 搜索范围
     * 0 酒店 1 景区 2 特产 3 美食 4 游记 5攻略 6 动态
     */
    range: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      luxianIcon,
      showPopup: this.value,
      seachValue: '',
      searchHistory: [],
      searchList: [],
      touristTrack: [],
      isFirst: true
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Popup, SearchHeader, Scroll, notData
  },
  created() {
    this.SearchScrolllHeight = window.innerHeight - 40 - 20
    if (isIphoneX()) {
      this.SearchScrolllHeight = window.innerHeight - 40 - 34
    }

    this.searchHistory = localSearch.get(this.type)
  },
  methods: {
    toggle(val) {
      this.seachValue = ''
      this.searchHistory = localSearch.get(this.type)
      this.searchList = []
      this.touristTrack = []
      this.$emit('toggle', val)
    },
    clearHistory () {
      localSearch.remove(this.type)
      this.searchHistory = localSearch.get(this.type)
    },
    submitSearch (value) {
      if (value === '') {
        this.$vux.toast.text('请输入关键字搜索~', 'middle')
        return
      }
      // 智能路线
      const findIndex = defaultTrack.findIndex(item => {
        return item.name.indexOf(value) > -1
      })
      if (findIndex > -1) {
        this.touristTrack = [defaultTrack[findIndex]]
      } else {
        this.touristTrack = []
      }
      const tmp = []
      this.range.forEach(item => {
        tmp.push('type:' + item)
      })
      const params = `(${tmp.join(' OR ')}) AND (name:${value} OR intro:${value})`
      axios.get(this, '/v1/query/' + params, {
        pageSize: 20
      }, (data) => {
        // 0 酒店 1 景区 2 特产 3 美食 4 游记 5攻略 6 动态 7 好友
        data.forEach(item => {
          switch (item.type) {
            case 0:
              item.icon = hotelIcon
              break
            case 1:
              item.icon = scenicIcon
              break
            case 2:
              item.icon = featureIcon
              break
            case 3:
              item.icon = foodIcon
              break
            case 4:
              item.icon = travelsIcon
              break
            case 5:
              item.icon = strategyIcon
              break
            case 6:
              item.icon = dynamicIcon
              break
            default:
              item.icon = scenicIcon
          }
        })
        this.isFirst = false
        localSearch.set(this.type, value)
        this.searchHistory = localSearch.get(this.type)
        this.searchList = data
      })
    },
    clickResultItem (id, type, item) {
      switch (type) {
        case 0:
        case 1:
          this.$router.push(`/cart/product/${id}/${type}`)
          break
        case 2:
          this.$router.push(`/specialLocalProductDetail/${id}`)
          break
        case 3:
          this.$router.push(`/foodDescribe/${id}`)
          break
        case 4:
        case 5:
          this.$router.push(`/address/playStrategy/${id}`)
          break
        case 6:
          this.$router.push(`/meiTu/dynamicDesc/${id}`)
          break
        default:
          this.$vux.toast.text('该搜索迷失在太空里了~')
      }
      this.seachValue = ''
      this.toggle(false)
    },
    clickHistoryItem (item) {
      this.seachValue = item
      this.submitSearch(item)
    },
    toTouristTrack (id) {
      this.$router.push(`/home/touristTrack/${id}`)
      this.seachValue = ''
      this.toggle(false)
    }
  },
  watch: {
    value(val) {
      this.showPopup = val
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.search-popup {
  background: #fff;
}
.title {
  line-height 18px;
  position: relative;
  padding-left: 12px;
  margin-bottom: 9px;
  font-size: $font-size-title;
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height 16px;
    border-radius: 10px;
    background: $color-theme;
    margin-right: 6px;
  }
  span {
    float: right;
    color: $color-text-2;
    font-size: $font-size-desc;
    font-weight: normal;
    i {
      margin-right: 3px;
    }
  }
}
.searchBlock{
  padding 15px
  position relative;
}
.history-wrapper {
  span {
    display: inline-block;
    font-size: $font-size-desc;
    color: $color-theme;
    line-height: 1;
    padding: 4px 9px;
    border: 1px solid $color-border;
    margin-right: 15px;
    margin-bottom: 6px;
    border-radius: 3px;
    &:hover {
      border-color: $color-border
    }
  }
}
.search-result{
  li {
    display: flex;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid $color-border;
    &:last-child {
      border-bottom: none;
    }
  }
  .right {
    width: calc(100% - 50px)
    height: 40px;
    line-height: 40px;
    .name {
      font-size: $font-size-title;
      line-height: 1.4;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .desc {
      font-size: $font-size-desc;
      line-height: 1.4;
      margin-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .type {
    width: 40px;
    min-width: 40px;
    height: 40px;
    background-size: cover;
    margin-right: 10px
  }
}
</style>
